<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}<br>
        <router-view></router-view>
        <!-- <a href="#/login">点我跳转login</a>
        <a href="#/register">点我跳转register</a> -->
        <router-link to="/login" tag="button">登录</router-link>
        <router-link to="/register" tag="button">注册</router-link>
    </div>
    
    <!-- 登录组件 -->
    <template id="login">
        <h1>登录组件</h1>
    </template>
        <!-- 注册组件 -->
    <template id="register">
        <h1>注册组件</h1>
    </template>
</body>
</html>

<script type="module">
    import {} from './js/vue.js';
    import {} from './js/vue-router.js';
    // 登录组件
    var login = {
        template:'#login',
        props:[]
    }
    var register = {
        template:'#register',
        props:[]
    }
   
    var routes = [
        {path:'/',redirect:'register'},
        {path:'/login',component:login},
        {path:'/register',component:register},
    ]
     // 创建路由对象
     var router = new VueRouter({
        routes,
    })
    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        },
        methods:{
            // 自定义方法
        },
        computed:{
            // 计算属性
        },
        router,
    })
</script>